<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width,  target-densitydpi=medium-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test view</title>
<link rel="stylesheet" type="text/css" href="../css/checklist.css" />
<link href='http://fonts.googleapis.com/css?family=Yeseva+One&v2' rel='stylesheet' type='text/css'>
<style type="text/css">
h1 { margin:20px 0 0 20px;  font-size:20px; }
h2 { margin:20px 0 0 20px; font-size:16px; }
h3 { margin:20px 0 0 20px; font-size:14px; }
.compTable { margin:20px; }

.linklist { margin:10px 0 20px 0; }
.linklist li { padding:10px 0; font-size:14px; }
.linklist li a { font-weight:bold; color:#98c4dd; }
.linklist li .txt_modify { padding-left:5px; color:#999; font-size:11px; }
.linklist li .date { color:#F30; font-weight:bold; }

</style>
</head>

<body>
	<h1>CHECK LIST</h1>

	<h2>CSS Properties</h2>

	<h3>Basic</h3>

	<table class="compTable">
		<tr>
			<th>Item</th>
			<th>현재</th>
			<th>현재단말화면</th>
			<th>적용시 기대화면</th>
			<th class="ie8">IE8</th>
			<th class="ch12">크롬12</th>
			<th class="ios43">iOS4.3</th>
			<th class="a23">A2.3</th>
		</tr>
		<tr>
			<td>Pseudo Element</td>
			<td class="pseudoelement"><span class="n">No</span></td>
			<td>
				<div class="eg_pseudoElement">Text</div>
			</td>
			<td class="x1"></td>
			<td>P</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>@font-face</td>
			<td class="fontface"><span class="y">Yes</span><span class="n">No</span></td>
			<td class="eg_webfont">Web Font Text</td>
			<td class="x2"></td>
			<td>P</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>background-size</td>
			<td class="backgroundsize"><span class="y">Yes</span><span class="n">No</span></td>
			<td class="eg_bgSize">BG Size</td>
			<td class="x3"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>border-image</td>
			<td class="borderimage"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_borderImage">Border Image</div>
			</td>
			<td class="x4"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>border-radius</td>
			<td class="borderradius"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_borderRadius">Border Radius</div>
			</td>
			<td class="x5"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>box-shadow</td>
			<td class="boxshadow"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_boxShadow">Box Shadow</div>
			</td>
			<td class="x6"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>Flexible Box Model</td>
			<td class="flexbox"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_flexbox">
					<div>A</div>
					<div>B</div>
					<div>C</div>
				</div>
			</td>
			<td class="x7"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
			<td>Multiple backgrounds</td>
			<td class="multiplebgs"><span class="y">Yes</span><span class="n">No</span></td>
			<td class="eg_multiBG"></td>
			<td class="x8"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>opacity</td>
			<td class="opacity"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_blue"></div>
				<div class="eg_red"></div>
			</td>
			<td class="x9"></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>rgba()</td>
			<td class="rgba"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_blue2"></div>
				<div class="eg_red2"></div>
			</td>
			<td class="x10"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>hsla()</td>
			<td class="hsla"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_blue3"></div>
				<div class="eg_red3"></div>
			</td>
			<td class="x11"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			</tr>
		<tr>
		<tr>
			<td>text-shadow</td>
			<td class="textshadow"><span class="y">Yes</span><span class="n">No</span></td>
			<td class="eg_textShadow">Shadow</td>
			<td class="x12"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>CSS Animations</td>
			<td class="cssanimations"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_animation"></div>
			</td>
			<td class="x13">(색 변하며 좌우이동)</td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>CSS Columns</td>
			<td class="csscolumns"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_column">동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세. 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세. 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세.</div>
			</td>
			<td class="x14"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>CSS Gradients</td>
			<td class="cssgradients"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_gradient"></div>
			</td>
			<td class="x15"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>CSS Reflections</td>
			<td class="cssreflections"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<img src="../img/nate_20.png" class="eg_reflection" />
			</td>
			<td class="x16"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>CSS 2D Transforms</td>
			<td class="csstransforms"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_transform">hover me!</div>
			</td>
			<td class="x17"></td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>CSS 3D Transforms</td>
			<td class="csstransforms3d"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_cube"></div> 
			</td>
			<td class="x18">(카드 돌듯 움직임)</td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td><span class="n">N</span></td>
		</tr>
		<tr>
			<td>CSS Transitions</td>
			<td class="csstransitions"><span class="y">Yes</span><span class="n">No</span></td>
			<td>
				<div class="eg_transition">click me!</div> 
			</td>
			<td class="x19">(클릭/터치시 색 변화)</td>
			<td><span class="n">N</span></td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		</table>

		<h3>Deep</h3>

		<ul class="linklist">
			<li><a href="view.html" target="_blank">Text overflow</a><span class="txt_modify">( last modified : <span class="date">2011.07.21</span> )</span></li>
			<li><a href="view.html" target="_blank">iframe_inner</a><span class="txt_modify">( last modified : <span class="date">2011.07.21</span> )</span></li>
			<li><a href="view.html" target="_blank">test_iframe</a><span class="txt_modify">( last modified : <span class="date">2011.07.21</span> )</span></li>
			<li><a href="view.html" target="_blank">position:fixed;</a><span class="txt_modify">( last modified : <span class="date">2011.07.21</span> )</span></li>
		</ul>


<script type="text/javascript" src="../js/modernizr-2.0.6.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

	$('.eg_transition').click(function() {
		$(this).toggleClass('toggle');
	});

});
</script>

</body>
</html>